<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mobile first web app theme | first</title>
  <meta name="description" content="mobile first, app, web app, responsive, admin dashboard, flat, flat ui">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/font.css">
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/html5.js"></script>
  <![endif]-->
</head>
<body>
  <!-- header -->
  <header id="header" class="navbar">
    <ul class="nav navbar-nav navbar-avatar pull-right">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">            
          <span class="hidden-xs-only">Mika Sokeil</span>
          <span class="thumb-small avatar inline"><img src="images/avatar.jpg" alt="Mika Sokeil" class="img-circle"></span>
          <b class="caret hidden-xs-only"></b>
        </a>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#"><span class="badge bg-danger pull-right">3</span>Notifications</a></li>
          <li class="divider"></li>
          <li><a href="docs.html">Help</a></li>
          <li><a href="signin.html">Logout</a></li>
        </ul>
      </li>
    </ul>
    <a class="navbar-brand" href="#">first</a>
    <button type="button" class="btn btn-link pull-left nav-toggle visible-xs" data-toggle="class:slide-nav slide-nav-left" data-target="body">
      <i class="fa fa-bars fa-lg text-default"></i>
    </button>
    <ul class="nav navbar-nav hidden-xs">
      <li>
        <div class="m-t m-b-small" id="panel-notifications">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-comment-o fa-fw fa-lg text-default"></i><b class="badge badge-notes bg-danger count-n">2</b></a>
          <section class="dropdown-menu m-l-small m-t-mini">
            <section class="panel panel-large arrow arrow-top">
              <header class="panel-heading bg-white"><span class="h5"><strong>You have <span class="count-n">2</span> notifications</strong></span></header>
              <div class="list-group">
                <a href="#" class="media list-group-item">
                  <span class="pull-left thumb-small"><img src="images/avatar.jpg" alt="John said" class="img-circle"></span>
                  <span class="media-body block m-b-none">
                    Moved to Bootstrap 3.0<br>
                    <small class="text-muted">23 June 13</small>
                  </span>
                </a>
                <a href="#" class="media list-group-item">
                  <span class="media-body block m-b-none">
                    first v.1 (Bootstrap 2.3 based) released<br>
                    <small class="text-muted">19 June 13</small>
                  </span>
                </a>
              </div>
              <footer class="panel-footer text-small">
                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                <a href="#">See all the notifications</a>
              </footer>
            </section>
          </section>
        </div>
      </li>
      <li><div class="m-t-small"><a class="btn btn-sm btn-info" data-toggle="modal" href="#modal"><i class="fa fa-fw fa-plus"></i> POST</a></div></li>
      <li class="dropdown shift" data-toggle="shift:appendTo" data-target=".nav-primary .nav">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cog fa-lg visible-xs visible-xs-inline"></i>Settings <b class="caret hidden-sm-only"></b></a>
        <ul class="dropdown-menu">
          <li>
            <a href="#" data-toggle="class:navbar-fixed" data-target='body'>Navbar 
              <span class="text-active">auto</span>
              <span class="text">fixed</span>
            </a>
          </li>
          <li class="hidden-xs">
            <a href="#" data-toggle="class:nav-vertical" data-target="#nav">Nav 
              <span class="text-active">vertical</span>
              <span class="text">horizontal</span>
            </a>
          </li>
          <li class="divider hidden-xs"></li>
          <li class="dropdown-header">Colors</li>
          <li>
            <a href="#" data-toggle="class:bg bg-black" data-target='.navbar'>Navbar 
              <span class="text-active">white</span>
              <span class="text">inverse</span>
            </a>
          </li>
          <li>
            <a href="#" data-toggle="class:bg-light" data-target='#nav'>Nav 
              <span class="text-active">inverse</span>
              <span class="text">light</span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
    <form class="navbar-form pull-left shift" action="" data-toggle="shift:appendTo" data-target=".nav-primary">
      <i class="fa fa-search text-muted"></i>
      <input type="text" class="input-sm form-control" placeholder="Search">
    </form>
  </header>
  <!-- / header -->
  <!-- nav -->
  <nav id="nav" class="nav-primary hidden-xs nav-vertical">
    <ul class="nav" data-spy="affix" data-offset-top="50">
      <li><a href="index.html"><i class="fa fa-dashboard fa-lg"></i><span>Dashboard</span></a></li>
      <li class="dropdown-submenu active">
        <a href="#"><i class="fa fa-th fa-lg"></i><span>Elements</span></a>
        <ul class="dropdown-menu">
          <li><a href="buttons.html">Buttons</a></li>
          <li><a href="icons.html"><b class="badge pull-right">302</b>Icons</a></li>            
          <li><a href="grid.html">Grid</a></li>
          <li><a href="widgets.html"><b class="badge bg-primary pull-right">8</b>Widgets</a></li>
          <li><a href="components.html"><b class="badge pull-right">18</b>Components</a></li>
          <li><a href="portlet.html">Portlet</a></li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a href="#"><i class="fa fa-list fa-lg"></i><span>Lists</span></a>
        <ul class="dropdown-menu">
          <li><a href="list.html">List groups</a></li>
          <li><a href="table.html">Table</a></li>
        </ul>
      </li>
      <li><a href="form.html"><i class="fa fa-edit fa-lg"></i><span>Form</span></a></li>
      <li><a href="chart.html"><i class="fa fa-signal fa-lg"></i><span>Chart</span></a></li>
      <li class="dropdown-submenu">
        <a href="#"><i class="fa fa-link fa-lg"></i><span>Others</span></a>
        <ul class="dropdown-menu">
          <li><a href="mail.html">Mail</a></li>
          <li><a href="calendar.html">Fullcalendar</a></li>
          <li><a href="timeline.html">Timeline</a></li>
          <li><a href="profile.html">Profile</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="maps.html">Maps</a></li>
          <li><a href="invoice.html">Invoice</a></li>
          <li><a href="signin.html">Signin page</a></li>
          <li><a href="signup.html">Signup page</a></li>
          <li><a href="404.html">404 page</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <!-- / nav -->
  <section id="content">
    <section class="main padder">
      <div class="clearfix">
        <h4><i class="fa fa-hand-up"></i>Buttons</h4>
      </div>
      <div class="row">
        <div class="col-lg-6">
          <section class="panel">
            <header class="panel-heading bg-white">Button options</header>
            <div class="panel-body doc-buttons">
              <a href="#" class="btn btn-default">Default</a>
              <a href="#" class="btn btn-white">White</a>
              <a href="#" class="btn btn-primary">Primary</a>
              <a href="#" class="btn btn-success">Success</a>
              <a href="#" class="btn btn-info">Info</a>
              <a href="#" class="btn btn-inverse">Inverse</a>
              <a href="#" class="btn btn-warning">Warning</a>
              <a href="#" class="btn btn-danger">Danger</a>
              <a href="#" class="btn btn-danger disabled">Disabled</a>
            </div>
          </section>          
          <section class="panel">
            <header class="panel-heading">Button size</header>
            <div class="panel-body">
              <p>
                <a href="#" class="btn btn-white btn-lg">Large button</a>
                <a href="#" class="btn btn-default btn-lg">Button</a>
              </p>
              <p>
                <a href="#" class="btn btn-white">Default button</a>
                <a href="#" class="btn btn-default">Button</a>
              </p>
              <p>
                <a href="#" class="btn btn-white btn-sm">Small button</a>
                <a href="#" class="btn btn-default btn-sm">Button</a>
              </p>
              <p>
                <a href="#" class="btn btn-white btn-xs">Mini button</a>
                <a href="#" class="btn btn-default btn-xs">Button</a>
              </p>
            </div>
          </section>          
          <section class="panel">
            <header class="panel-heading">Button dropdowns</header>
            <div class="panel-body">
              <p>Single button dropdowns</p>
              <div class="block">
                <div class="btn-group">
                  <button class="btn btn-white dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
              <div class="block">
                <div class="btn-group">
                  <button class="btn btn-white btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
              <div class="block">
                <div class="btn-group">
                  <button class="btn btn-white btn-xs dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
              <p>Split button dropdowns & variation </p>
              <div class="block">
                <div class="btn-group">
                  <button class="btn btn-white">Action</button>
                  <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group dropup">
                  <button class="btn btn-default">Action</button>
                  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </section>
          <section class="panel">
            <header class="panel-heading">Button with icon</header>
            <div class="panel-body">
              <p>
                <a href="#" class="btn btn-white"><i class="fa fa-html5"></i> Html5</a>
                <a href="#" class="btn btn-info"><i class="fa fa-css3"></i> CSS3</a>
              </p>            
              <p>
                <a href="#" class="btn btn-white btn-lg btn-block"><i class="fa fa-bars pull-right"></i> Block button with icon</a>
              </p>
              <p>
                <a href="#" class="btn btn-white btn-block"><i class="fa fa-bars pull-left"></i> Block button with icon</a>
              </p>
            </div>
          </section> 
        </div>
        <div class="col-lg-6">
          <section class="panel">
            <header class="panel-heading bg-white">
              Button groups
            </header>
            <div class="panel-body">
              <div class="block">
                <div class="btn-group">
                  <button type="button" class="btn btn-white">Left</button>
                  <button type="button" class="btn btn-white">Middle</button>
                  <button type="button" class="btn btn-white">Right</button>
                </div>
              </div>
              <p>Justified button groups</p>
              <div class="block">
                <div class="btn-group btn-group-justified">
                  <a href="#" class="btn btn-primary">Left</a>
                  <a href="#" class="btn btn-info">Middle</a>
                  <a href="#" class="btn btn-success">Right</a>
                </div>
              </div>
              <p>Multiple button groups</p>
              <div class="btn-toolbar" style="margin: 0;">
                <div class="btn-group">
                  <button type="button" class="btn">1</button>
                  <button type="button" class="btn">2</button>
                  <button type="button" class="btn">3</button>
                  <button type="button" class="btn">4</button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn">5</button>
                  <button type="button" class="btn">6</button>
                  <button type="button" class="btn">7</button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn">8</button>
                </div>
              </div>
            </div>
          </section>
          <section class="panel">
            <header class="panel-heading bg-white">
              <ul class="nav nav-pills pull-right">
                <li><a href="#" data-toggle="class:btn-circle" data-target="#circle-buttons a">Toggle</a></li>
              </ul>
              Circle button
            </header>
            <div class="panel-body">
              <p>
                <small class="text-muted">Click the <a href="#" data-toggle="class:btn-circle" data-target="#circle-buttons a">Toggle</a> link to change them to normal button</small>
              </p>
              <p id="circle-buttons" class="doc-buttons">
                <a href="#" class="btn btn-circle"><i class="fa fa-envelope-o"></i>Inbox <b class="badge bg-white">5</b></a>
                <a href="#" class="btn btn-primary btn-circle"><i class="fa fa-lightbulb-o"></i>Projects</a>
                <a href="#" class="btn btn-success btn-circle"><i class="fa fa-check"></i>Tasks</a>
                <a href="#" class="btn btn-info btn-circle"><i class="fa fa-bar-chart-o"></i>Stats</a>
                <a href="#" class="btn btn-inverse btn-circle"><i class="fa fa-clock-o"></i>Timeline<b class="badge"><i class="fa fa-plus"></i></b></a>
                <a href="#" class="btn btn-warning btn-circle"><i class="fa fa-calendar-o"></i>Calendar</a>
                <a href="#" class="btn btn-danger btn-circle"><i class="fa fa-group"></i>Groups</a>
                <a href="#" class="btn btn-white btn-circle"><i class="fa fa-plus"></i>More</a>
              </p>
              <small class="text-muted">You can change them to <a href="#" data-toggle="class:btn-sm" data-target="#circle-buttons a">Small</a> buttons, also support the Mini and Large.</small>
            </div>
          </section>
          <section class="panel">
            <header class="panel-heading">Button components</header>
            <div class="panel-body">
              <p class="text-muted">
                <small>There are a few easy ways to quickly get started with Bootstrap, each one ...</small>
                <small class="text-muted hide" id="moreless"> appealing to a different skill level and use case. Read through to see what suits your particular needs.</small>
              </p>
              <p>
                <button href="#moreless" class="btn btn-sm btn-white" data-toggle="class:show">
                  <i class="fa fa-plus text"></i>
                  <span class="text">More</span>
                  <i class="fa fa-minus text-active"></i>
                  <span class="text-active">Less</span>
                </button>
              </p>
              <p>
                <button class="btn btn-white" id="btn-1" href="#btn-1" data-toggle="class:btn-success">
                  <i class="fa fa-cloud-upload text"></i>
                  <span class="text">Upload</span>
                  <i class="fa fa-check text-active"></i>
                  <span class="text-active">Success</span>
                </button>
                <button class="btn btn-white" data-toggle="button">
                  <i class="fa fa-heart-o text"></i>
                  <i class="fa fa-heart text-active text-danger"></i>
                </button>
                <button class="btn btn-white" data-toggle="button">
                  <span class="text">
                    <i class="fa fa-thumbs-up text-success"></i> 25
                  </span>
                  <span class="text-active">
                    <i class="fa fa-thumbs-down text-danger"></i> 10
                  </span>
                </button>
              </p>
              <div class="block">
                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-sm btn-info active">
                    <input type="radio" name="options" id="option1"> <i class="fa fa-check text-active"></i>Male
                  </label>
                  <label class="btn btn-sm btn-danger">
                    <input type="radio" name="options" id="option2"> <i class="fa fa-check text-active"></i>Female
                  </label>
                  <label class="btn btn-sm btn-inverse">
                    <input type="radio" name="options" id="option3"> <i class="fa fa-check text-active"></i>N/A
                  </label>
                </div>
              </div>
              <div class="block">
                <div class="btn-group" data-toggle="buttons">
                  <label class="btn btn-sm btn-white active">
                    <input type="radio" name="options" id="option1"> ALL
                  </label>
                  <label class="btn btn-sm btn-white">
                    <input type="radio" name="options" id="option2"> ANY
                  </label>
                </div>
                of the following
              </div>
            </div>
          </section>
          <section class="panel doc-buttons">
            <header class="panel-heading">
              <ul class="nav nav-pills pull-right">
                <li><a href="#" data-toggle="class:btn-circle" data-target="#social-buttons a">Toggle</a></li>
              </ul>
              Social buttons
            </header>
            <div class="panel-body">
              <p id="social-buttons">
                <a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="fa fa-twitter"></i> Twitter</a>
                <a href="#" class="btn btn-circle btn-sm btn-facebook"><i class="fa fa-facebook"></i> Facebook</a>
                <a href="#" class="btn btn-circle btn-sm btn-gplus"><i class="fa fa-google-plus"></i> Google+</a>              
              </p>
            </div>
          </section>
        </div>
      </div>
    </section>
  </section>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder clearfix">
      <p>
        <small>&copy; first 2013, Mobile first web app framework base on Bootstrap</small><br><br>
        <a href="#" class="btn btn-xs btn-circle btn-twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="btn btn-xs btn-circle btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="btn btn-xs btn-circle btn-gplus"><i class="fa fa-google-plus"></i></a>
      </p>
    </div>
  </footer>
  <a href="#" class="hide slide-nav-block" data-toggle="class:slide-nav slide-nav-right" data-target="body"></a>
  <!-- / footer -->
	<script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- app -->
  <script src="js/app.js"></script>
  <script src="js/app.plugin.js"></script>
  <script src="js/app.data.js"></script>
</body>
</html>